<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<!--图表 Apex-->
<!-- Section - Bootstrap Brain Component -->
<section class="pb-3 pb-md-4 pb-xl-5 bg-light" th:fragment="ApexCharts">
    <div class="container">
        <div class="row gy-3 gy-md-4">
            <div class="col-12 col-lg-6">
                <div class="row gy-3 gy-md-4">
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Area Chart</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
                                            <div class="mb-3 mb-sm-0">
                                                <h5 class="card-title widget-card-title">Sales Overview</h5>
                                            </div>
                                            <div>
                                                <select class="form-select text-secondary border-light-subtle">
                                                    <option value="1">March 2023</option>
                                                    <option value="2">April 2023</option>
                                                    <option value="3">May 2023</option>
                                                    <option value="4">June 2023</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Column Chart</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-3">Revenue Stats</h5>
                                        <div id="bsb-chart-3"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Column Chart 2</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
                                            <div class="mb-3 mb-sm-0">
                                                <h5 class="card-title widget-card-title">Revenue</h5>
                                            </div>
                                            <div>
                                                <select class="form-select text-secondary border-light-subtle">
                                                    <option value="1">Month</option>
                                                    <option value="2">Week</option>
                                                    <option value="3">Day</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-5"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Donut Chart 3</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-1">Devices Stats</h5>
                                        <p class="fs-7 text-secondary mb-4">Overview</p>
                                        <div id="bsb-chart-7" class="mb-4"></div>
                                        <div class="row gy-4">
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-display"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Desktop</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-primary-subtle text-primary rounded-2 py-1 px-2">60%</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-success-subtle text-success rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-tablet"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Tablet</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-success-subtle text-success rounded-2 py-1 px-2">25%</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-danger-subtle text-danger rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-phone"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Mobile</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-danger-subtle text-danger rounded-2 py-1 px-2">15%</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Area Chart 3</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-2">Projects</h5>
                                        <div class="row gy-0">
                                            <div class="col-12">
                                                <h4>20,184</h4>
                                            </div>
                                            <div class="col-12">
                                                <div class="d-flex align-items-center">
                              <span class="fs-6 bsb-w-25 bsb-h-25 bg-danger-subtle text-danger rounded-circle d-flex align-items-center justify-content-center me-2">
                                <i class="bi bi-arrow-right-short bsb-rotate-45"></i>
                              </span>
                                                    <div>
                                                        <span class="fs-7">-15%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-9" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6">
                <div class="row gy-3 gy-md-4">
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Donut Chart</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
                                            <div class="mb-3 mb-sm-0">
                                                <h5 class="card-title widget-card-title">Browser Usage</h5>
                                            </div>
                                            <div>
                                                <select class="form-select text-secondary border-light-subtle">
                                                    <option value="1">March 2023</option>
                                                    <option value="2">April 2023</option>
                                                    <option value="3">May 2023</option>
                                                    <option value="4">June 2023</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Donut Chart 2</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <div class="d-block d-sm-flex align-items-center justify-content-between mb-3">
                                            <div class="mb-3 mb-sm-0">
                                                <h5 class="card-title widget-card-title">Department Sales</h5>
                                            </div>
                                            <div>
                                                <select class="form-select text-secondary border-light-subtle">
                                                    <option value="1">March 2023</option>
                                                    <option value="2">April 2023</option>
                                                    <option value="3">May 2023</option>
                                                    <option value="4">June 2023</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-4"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Area Chart 2</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-1">Visitor Stats</h5>
                                        <p class="fs-7 text-secondary mb-4">Overview</p>
                                        <div id="bsb-chart-6" class="mb-4"></div>
                                        <div class="row gy-4">
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-browser-chrome"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Chrome</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-primary-subtle text-primary rounded-2 py-1 px-2">+345</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-success-subtle text-success rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-browser-safari"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Safari</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-success-subtle text-success rounded-2 py-1 px-2">+129</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-danger-subtle text-danger rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-browser-firefox"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Firefox</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-danger-subtle text-danger rounded-2 py-1 px-2">+89</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <div class="row align-items-center">
                                                    <div class="col-8">
                                                        <div class="d-flex align-items-center">
                                                            <div>
                                                                <div class="fs-5 bsb-w-50 bsb-h-50 bg-info-subtle text-info rounded-2 d-flex align-items-center justify-content-center me-3">
                                                                    <i class="bi bi-browser-edge"></i>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="m-0">Edge</h6>
                                                                <p class="text-secondary m-0 fs-7">since last week</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <h6 class="fs-7 d-flex align-items-center justify-content-end m-0">
                                                            <span class="bg-info-subtle text-info rounded-2 py-1 px-2">+62</span>
                                                        </h6>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Column Chart 3</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-2">Customers</h5>
                                        <div class="row gy-0">
                                            <div class="col-12">
                                                <h4>3,131</h4>
                                            </div>
                                            <div class="col-12">
                                                <div class="d-flex align-items-center">
                              <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-2">
                                <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                              </span>
                                                    <div>
                                                        <span class="fs-7">+19%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-8" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="card widget-card bg-transparent border-light shadow-sm">
                            <div class="card-header bg-white p-4 border-light-subtle">
                                <h5 class="card-title widget-card-title m-0">Donut Chart 4</h5>
                            </div>
                            <div class="card-body p-4">
                                <div class="card widget-card border-light shadow-sm">
                                    <div class="card-body p-4">
                                        <h5 class="card-title widget-card-title mb-2">Sales</h5>
                                        <div class="row gy-0">
                                            <div class="col-12">
                                                <h4>2,679</h4>
                                            </div>
                                            <div class="col-12">
                                                <div class="d-flex align-items-center">
                              <span class="fs-6 bsb-w-25 bsb-h-25 bg-success-subtle text-success rounded-circle d-flex align-items-center justify-content-center me-2">
                                <i class="bi bi-arrow-right-short bsb-rotate-n45"></i>
                              </span>
                                                    <div>
                                                        <span class="fs-7">+39%</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div id="bsb-chart-10" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/apexcharts@4.5.0"></script>

    <!-- Javascript Files: Controllers -->
    <script th:src="@{/assets/controller/chart-1.js}"></script>
    <script th:src="@{/assets/controller/chart-2.js}"></script>
    <script th:src="@{/assets/controller/chart-3.js}"></script>
    <script th:src="@{/assets/controller/chart-4.js}"></script>
    <script th:src="@{/assets/controller/chart-5.js}"></script>
    <script th:src="@{/assets/controller/chart-6.js}"></script>
    <script th:src="@{/assets/controller/chart-7.js}"></script>
    <script th:src="@{/assets/controller/chart-8.js}"></script>
    <script th:src="@{/assets/controller/chart-9.js}"></script>
    <script th:src="@{/assets/controller/chart-10.js}"></script>
</section>
</html>